﻿<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Demo::Menu::</title>
    <link rel="stylesheet" type="text/css" href="../main.css">
    <script src="../../release/jskit.core.js">
    </script>
    <script src="../JskitConfig_doc.js">
    </script>
    <script>
        var jm = new JskitMenu("jm");
        var n1 = jm.add(null, "1", "", "", "class1", 1, 2);
        var n2 = jm.add(null, "2", "", "", "class1", 2, 3);
        var n2_0 = jm.add(n2, "2-0", "", "", "class2", 1, 3);
        var n2_1 = jm.add(n2, "2-1", "http://www.mending.cn", "_self", "class2", 2, 4);
        var n2_2_1 = jm.add(n2_1, "2-1-1", "", "", "class3", 1, 2);
        var n2_2_2 = jm.add(n2_1, "2-1-2", "", "", "class3", 1, 2);
        var n2_2 = jm.add(n2, "2-2", "", "", "class2", 1, 3);
        var n2_3 = jm.add(n2, "2-3", "", "", "class2", 2, 2);
        var n2_3_1 = jm.add(n2_3, "2-3-1", "", "", "class3", 1, 2);
        var n2_3_2 = jm.add(n2_3, "2-3-2", "", "", "class3", 1, 2);
        var n3 = jm.add(null, "3", "", "", "class1", 2, 1);
        var n3_1 = jm.add(n3, "3-1", "", "", "class2", 1, 2);
        var n3_2 = jm.add(n3, "3-2", "", "", "class2", 1, 2);
        var n3_3 = jm.add(n3, "3-3", "", "", "class2", 1, 2);
        jm.setDynamic(true);
    </script>
    <style type="text/css">
        .class1 {
            width: 100px;
            height: 22px;
            background-color: #555555;
            color: #ffffff;
            border: 2px outset #ffffff;
            cursor: pointer;
        }

        .class1_over {
            width: 100px;
            height: 22px;
            background-color: #0000ff;
            color: #ffffff;
            border: 2px outset #ffffff;
            cursor: pointer;
        }

        .class2 {
            width: 200px;
            height: 22px;
            background-color: #ffcc00;
            color: #000000;
            border: 2px outset #ffffff;
            cursor: pointer;
        }

        .class2_over {
            width: 200px;
            height: 22px;
            background-color: #0000ff;
            color: #ffffff;
            border: 2px outset #ffffff;
            cursor: pointer;
        }

        .class3 {
            width: 100px;
            height: 22px;
            background-color: #009900;
            color: #000000;
            border: 2px outset #ffffff;
            cursor: pointer;
        }

        .class3_over {
            width: 100px;
            height: 22px;
            background-color: #0000ff;
            color: #ffffff;
            border: 2px outset #ffffff;
            cursor: pointer;
        }
    </style>
</head>
<body onload="">
<table border="0" id="Table1">
    <tbody>
    <tr>
        <td class="package">
            JskitMenu.js DEMO
        </td>
    </tr>
    <tr>
        <td class="content"><a href="../tutorial/JskitMenu.html">查看JskitMenu.js参考</a></td>
    </tr>
    <tr>
        <td height="30px"></td>
    </tr>
    <tr>
        <td class="content">
            <ul>
                <li><a href="#menu">1、输出导航菜单</a></li>
                <li><a href="#tree">2、输出树形菜单</a></li>
                <li><a href="#format">2、菜单数据格式</a></li>
            </ul>
        </td>
    </tr>
    <tr>
        <td class="package2">
            <a id="menu"></a>1、输出导航菜单
        </td>
    </tr>
    <tr>
        <td>
            <br>
            <br>
            第一步、引入必须的javascript文件
            <textarea name="JskitSyntax_code" class="html">
                &lt;head>
                ...
                &lt;--// import javascript files -->
                &lt;script src="$JSKIT_PATH$/base/JskitBase.js">&lt;/script>
                &lt;script src="$JSKIT_PATH$/base/JskitUtil.js">&lt;/script>
                &lt;script src="$JSKIT_PATH$/base/JskitEvents.js">&lt;/script>
                &lt;script src="$JSKIT_PATH$/ui/JskitMenu.js"> &lt;/script>
                ...
                &lt;/head>
            </textarea>
            第二步、构造菜单。
            <br>
            <textarea name="JskitSyntax_code" class="js">
                //初始化JskitMenu
                var jm = new JskitMenu("jm");

                //增加一个节点，并返回该节点，参数说明：
                //(父节点,"菜单文字","链接","打开方式","菜单项的css样式","子菜单的展开方向","子菜单显示的位置")
                //"打开方式"参数可用值,缺省为_self：
                // "_self"
                // "_blank"
                // "_top"
                // "_parent"
                // "_opener"
                //"子菜单的展开方向"参数可用值：
                // 1(jm.Direction.VER) 横向
                // 2(jm.Direction.HOR) 纵向
                //"子菜单显示的位置"参数可用值：
                // 1(jm.Location.UP) 上方
                // 2(jm.Location.RIGHT) 右方
                // 3(jm.Location.DOWN) 下方
                // 4(jm.Location.LEFT) 左方
                var n1 = jm.add(null, "1", "#", "", "class1", 1, 2);

                var n2 = jm.add(null, "2", "#", "", "class1", 2, 3);
                //在菜单2下添加子菜单
                var n2_1 = jm.add(n2, "2-1", "http://www.mending.cn", "_self", "class2", 2, 2);
                //在菜单2-1下添加子菜单
                var n2_2_1 = jm.add(n2_1, "2-1-1", "#", "", "class3", 1, 2);
                var n2_2_2 = jm.add(n2_1, "2-1-2", "#", "", "class3", 1, 2);
                var n2_2 = jm.add(n2, "2-2", "#", "", "class2", 1, 3);
                var n2_3 = jm.add(n2, "2-3", "#", "", "class2", 2, 2);
                var n2_3_1 = jm.add(n2_3, "2-3-1", "#", "", "class3", 1, 2);
                var n2_3_2 = jm.add(n2_3, "2-3-2", "#", "", "class3", 1, 2);

                var n3 = jm.add(null, "3", "#", "", "class1", 2, 3);
                //在菜单3下添加子菜单
                var n3_1 = jm.add(n3, "3-1", "#", "", "class2", 1, 2);
                var n3_2 = jm.add(n3, "3-2", "#", "", "class2", 1, 2);
                var n3_3 = jm.add(n3, "3-3", "#", "", "class2", 1, 2);

                //设置第一层菜单的展开方向
                //jm.setRootDirection(jm.Direction.VER);

                //设置菜单是否为动态显示，缺省为静态，静态菜单，通过点击菜单项切换下一层菜单的显示。
                jm.setDynamic(true);
            </textarea>
            第三步、输出菜单
            <textarea name="JskitSyntax_code" class="html">
                &lt;script&gt;
                jm.expand();
                &lt;/script&gt;
            </textarea>
            <div style="width:100%">
                <script>
                    jm.expand();
                    var xx;
                </script>
            </div>
            <br/><br/><br/>
        </td>
    </tr>
    <tr>
        <td class="package2">
            <a id="tree"></a>2、输出树形菜单
        </td>
    </tr>
    <tr>
        <td>
            <textarea name="JskitSyntax_code" class="js">
                var jm2 =&nbsp;jm.clone("jm2");
                //或者使用jm2 = new JskitMenu("jm2"); 然后添加菜单数据
                //这里为了方面直接从jm复制一个新的JskitMenu对象
                jm2.setTreePrefixCssClass("tree_prefix");
                jm2.setTreeFolderCssClass("tree_node");
                jm2.setTreeLeafCssClass("tree_leaf");
                jm2.setTreeFolderSignCode("&#9660;");
                jm2.setTreeLeafSignCode("&#9675;");
                jm2.expandTree();
            </textarea>
            <textarea name="JskitSyntax_code" class="html">
                &lt;style&gt;
                .tree_prefix{
                font-size:18px;
                font-family:courier new;
                color:#888888;
                }
                .tree_node{
                font-size:13px;
                color:#ff6600;
                cursor:pointer;
                }
                .tree_leaf{
                font-size:13px;
                font-weight:normal;
                color:#009900;
                cursor:pointer;
                }
                &lt;/style&gt;
            </textarea>
            <style>
                .tree_prefix {
                    font-size: 18px;
                    font-family: courier new;
                    color: #888888;
                }

                .tree_node {
                    font-size: 13px;
                    color: #ff6600;
                    cursor: pointer;
                }

                .tree_leaf {
                    font-size: 13px;
                    font-weight: normal;
                    color: #009900;
                    cursor: pointer;
                }
            </style>
            <div style="width:100%">
                <script>
                    var jm2 = jm.clone("jm2");
                    jm2.setTreePrefixCssClass("tree_prefix");
                    jm2.setTreeFolderCssClass("tree_node");
                    jm2.setTreeLeafCssClass("tree_leaf");
                    jm2.setTreeFolderSignCode("&#9660;");
                    jm2.setTreeLeafSignCode("&#9675;");
                    jm2.expandTree();
                </script>
            </div>
        </td>
    </tr>
    <tr>
        <td class="package2">
            <a id="format"></a>3、菜单数据的格式
        </td>
    </tr>
    <tr>
        <td>
			格式1：Xml
            <textarea name="JskitSyntax_code" class="xml">
&lt;?xml version="1.0" encoding="utf-8"?>
&lt;root id="root">
	&lt;div type="jmnode" id="id0" target="_self" css="jskitmenu_item_f" url="1.html" name="菜单1" direction="2" location="3">
		&lt;div type="jmnode" id="id0-0" target="_self" css="jskitmenu_item" url="1-1.html" name="菜单1-1" direction="2" location="3" />
	&lt;/div>
	&lt;div type="jmnode" id="id1" target="_self" css="jskitmenu_item_f" url="2.html" name="菜单2" direction="2" location="3" />
&lt;/root>
            </textarea>
			格式2：Json
			<textarea name="JskitSyntax_code" class="js">
[
	{	type:"jmnode",
		id:"jm1",
		target:"_self",
		css:"jskitmenu_item_f",
		url:"",
		name:"Action1",
		direction:2,
		location:3,
		children:[
			{	type:"jmnode",
				id:"jm1-1",
				target:"_self",
				css:"jskitmenu_item_f",
				url:"",
				name:"Action1-1",
				direction:2,
				location:3,
				children:[
				
				]
			}
		]
	}
	,{	type:"jmnode",
		id:"jm2",
		target:"_self",
		css:"jskitmenu_item_f",
		url:"",
		name:"Action2",
		direction:2,
		location:3,
		children:[]
	}
];
			</textarea>
        </td>
    </tr>
	</tbody>
</table>
</body>
</html>
